<template>
  <div class="detailWrap w-full h-full">
    <el-tabs v-model="activeName" class="demo-tabs w-full h-full">
      <el-tab-pane class="flex w-full h-full gap-6" label="项目详情" name="0">
        <el-card class="baseInfo w-[33%] h-full">
          <div class="header flex items-center justify-between">
            <section class="left flex items-center gap-1">
              <img src="/public/Menu.svg" class="!w-[18px]" />
              <span class="leading-21">项目基本信息</span>
            </section>
            <div class="right">
              <el-button type="default" class=" !text-blue">
                编辑
              </el-button>
            </div>
          </div>
          <div class="content">
            <el-descriptions title="" :column="2">
              <el-descriptions-item label="项目ID：">{{ projectInfo.id }}</el-descriptions-item>
              <el-descriptions-item label="项目名称：">{{ projectInfo.name }}</el-descriptions-item>
              <el-descriptions-item label="项目类型：">{{ projectInfo.type }}</el-descriptions-item>
              <el-descriptions-item label="项目权限：">{{ projectInfo.auth == 1 ? '公开' : '私有' }}</el-descriptions-item>
              <el-descriptions-item label="创建人员：">{{ projectInfo.creator }}</el-descriptions-item>
              <el-descriptions-item label="创建时间：">{{ projectInfo.createTime }}</el-descriptions-item>
              <el-descriptions-item label="项目描述：">{{ projectInfo.description }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <el-card class="modelInfo flex-1 h-full">
          <div class="header flex items-center justify-between">
            <section class="left flex items-center gap-1">
              <img src="/public/Menu.svg" class="!w-[18px]" />
              <span class="leading-21">项目模型信息</span>
            </section>
            <div class="right w-48">
              <el-select placeholder="请输入模型名称" v-model="queryParams.search" />
            </div>
          </div>
          <div class="content">
            <el-table :data="modelData" stripe height="600"
              :header-cell-style="{ backgroundColor: '#f2f2f2', fontWeight: 700, color: '#909399', border: '1px solid #f2f2f2' }">
              <el-table-column type="index" width="50" />
              <el-table-column prop="name" label="模型名称" />
              <el-table-column prop="type" label="模型类型" />
              <el-table-column prop="detail" label="训练详情" />
              <el-table-column prop="assess" label="评估详情" />
              <el-table-column prop="infer" label="推理详情" />
            </el-table>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane class="w-full h-full" label="图库详情" name="1">
        <galleryInfo :com="true" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import galleryInfo from '../a-gallery/galleryInfo.vue';
const activeName = ref('0');
const queryParams = reactive({
  search: ''
})
const projectInfo = ref({
  name: 'sample info',
  description: '项目列表',
  id: 'xm2346593',
  type: '目标检测',
  auth: 1,
  createTime: '2023-05-05',
  creator: 'kooriookami',
})
const modelData = ref([
  {
    name: 'model1',
    type: '目标检测',
    detail: '训练详情',
    assess: '评估详情',
    infer: '推理详情'
  },
  {
    name: 'model2',
    type: '目标检测',
    detail: '训练详情',
    assess: '评估详情',
    infer: '推理详情'
  },
  {
    name: 'model3',
    type: '目标检测',
    detail: '训练详情',
    assess: '评估详情',
    infer: '推理详情'
  }
])

onMounted(() => {

})

</script>

<style scoped lang="scss">
:deep() {
  .el-card__body {
    padding: 10px;
  }
}
</style>
